<template>
  <div class="set_title_bar">
    <div class="contol_group fn-clear">
      <span class="demonstration" :class="{ hasNo: isMust && title == '' }"
        >标题：</span
      >
      <div class="setChoice">
        <el-input v-model="title" placeholder="请输入标题"></el-input>
      </div>
    </div>
    <p
      v-if="isMust && title == ''"
      class="reminder"
      :class="{ hasNo: isMust && title == '' }"
    >
      标题不能为空
    </p>

    <div class="contol_group fn-clear">
      <span
        class="demonstration"
        :class="{ hasNo: isMust && titleLeftText == '' }"
        >左侧：</span
      >
      <div class="setChoice">
        <el-input
          v-model="titleLeftText"
          placeholder="请输入返回文案"
        ></el-input>
      </div>
    </div>
    <div class="arrow">
      <el-checkbox v-model="titleLeftIsShowArrow">显示箭头</el-checkbox>
    </div>
    <p
      v-if="isMust && titleLeftText == ''"
      class="reminder"
      :class="{ hasNo: isMust && titleLeftText == '' }"
    >
      标题不能为空
    </p>

    <div class="contol_group align fn-clear">
      <span
        class="demonstration"
        :class="{ hasNo: isMust && titleLeftText == '' }"
        >左侧：</span
      >
      <div class="setChoice">
        <el-radio-group type="border-card" v-model="titleRightTextOrIcon">
          <el-radio-button label="text">文字</el-radio-button>
          <el-radio-button label="icon">图标</el-radio-button>
        </el-radio-group>
        <el-input
          class="mt-20"
          v-if="titleRightTextOrIcon === 'text'"
          v-model="titleRightText"
          placeholder="请输入右侧文案"
        ></el-input>
        <div
          v-if="titleRightTextOrIcon === 'icon'"
          class="editor-click-event mt-20 position"
        >
          <Icon iconClass="circle-add" color="#409EFF" size="20px"></Icon>&nbsp;
          <div class="desc">选择图标</div>
          <input type="file" @change="getFileContent" class="file" />
        </div>

        <div class="editor-click-event mt-20">
          <div class="desc">编辑点击事件</div>
          &nbsp;<Icon iconClass="add" color="#409EFF" size="20px"></Icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "SetTitleBar",
  props: ["pageParam"],
  data() {
    return {
      // titleStyle:'style1',
      // more:'isHave',
      // inputTitle:'',
      // titleNav:{
      //     url:'',
      //     navShow:'',
      //     branchLine:'',
      //     validate_id:'',
      //     isNavShow:true,
      //     isModify:false
      // },
      // spcDescription:'',
      // // 选择得路由的链接
      // firstRoute:'',
      // // 选择路由的名字
      // url_content:'',
      // linkType:'',
      // options: [],
      // // 判断弹出框是否显示参数
      // isLink:false,
      //  // 一页显示数据
      // tabNavs:[],
      // // 总数据
      // tableData: [],
      // // 判断弹出框是否显示参数
      // isLink:false,
      // //默认每页数据量
      // pagesize: 5,
      // //当前页码
      // currentPage: 1,
      //  // 标识打开哪个窗口
      // isWinName:'',
      // // 外链链接
      // OuterLink:'',
      // total:0

      title: "自定义标题",
      titleLeftText: "返回",
      titleLeftIsShowArrow: true,
      titleRightTextOrIcon: "",
      titleRightText: "",
      titleRightIcon: "",
      titleRightClickEventContent: "",
    };
  },
  updated() {
    var title = {
      // titleStyle:this.titleStyle,
      // more:this.more,
      // inputTitle:this.inputTitle,
      // titleNav:this.titleNav,

      title: this.title,
      titleLeftText: this.titleLeftText,
      titleLeftIsShowArrow: this.titleLeftIsShowArrow,
      titleRightTextOrIcon: this.titleRightTextOrIcon,
      titleRightText: this.titleRightText,
      titleRightText: this.titleRightText,
      titleRightIcon: this.titleRightIcon,
      titleRightClickEventContent: this.titleRightClickEventContent,
    };
    this.$emit("event", title);
  },
  methods: {
    ...mapMutations(["noState", "changeState", "startSort", "stopSort"]),
    // 初始化数据
    initData() {
      // this.titleStyle = this.pageParam.titleStyle;
      // this.more = this.pageParam.more;
      // this.inputTitle = this.pageParam.inputTitle;
      // this.titleNav = this.pageParam.titleNav || '';

      this.title = this.pageParam.title;
      this.titleLeftText = this.pageParam.titleLeftText;
      this.titleLeftIsShowArrow = this.pageParam.titleLeftIsShowArrow;
      this.titleRightTextOrIcon = this.pageParam.titleRightTextOrIcon || "text";
      this.titleRightText = this.pageParam.titleRightText;
      this.titleRightIcon = this.pageParam.titleRightIcon;
      this.titleRightClickEventContent =
        this.pageParam.titleRightClickEventContent;
    },
    //选取链接项时触发是否有弹窗
    // logoutHandle(item,row,type){
    //     this.linkType = type;
    // 	if(this.options[row].is_open == '1'){
    //         this.isLink = true;
    //         this.isWinName = 'InnerChain'
    //         this.firstRoute = item.url_pattern;
    //         this.url_content = item.url_content;
    // 		this.currentPage = 1;
    // 		this.getUrlList(this.firstRoute, 1)
    // 	}else if(this.options[row].is_open == '2'){
    //         this.isLink = true;
    //         this.isWinName = 'OuterChain';
    //     }else{
    // 		this.titleNav.isNavShow = false;
    // 		this.titleNav.navShow = item.url_content;
    // 		this.titleNav.validate_id = '';
    //         this.titleNav.branchLine = '';
    //         this.titleNav.url = item.url_pattern;
    // 	}
    // },
    //清除选择链接
    // delNavChoice(){
    //     this.titleNav.isNavShow = true;
    //     this.titleNav.navShow = '';
    // 	this.titleNav.branchLine = '';
    // 	this.titleNav.url ='';
    // 	this.titleNav.validate_id = '';
    // },
    // 选取导航
    // choiceNav(index,row){
    //     this.isLink = false;
    //     if(this.firstRoute == 'index'){
    //         this.titleNav.branchLine = row.page_name;
    //     }else if(this.firstRoute == 'productGroup'){
    //         this.titleNav.branchLine = row.group_name;
    //     }else if(this.firstRoute == 'detail'){
    //         this.titleNav.branchLine = row.product_name;
    //     }
    //     this.titleNav.navShow = this.url_content;
    //     this.titleNav.isNavShow = false;
    //     this.titleNav.url = this.firstRoute;
    //     this.titleNav.validate_id = row.validate_id
    // },
    // 获取链接数据
    // getLink(){
    //     this.$ajax({
    //         methods:'get',
    //         url:'/center/publics/publics/urlList'
    //     }).then(res => {
    //         this.options = res.data.urlList;
    //     }).catch(err => {
    //         (err);
    //     })
    // },
    //获取弹窗链接
    // getUrlList(type, val){
    // 	if(type == 'index'){
    //         this.$ajax({
    //             methods:'get',
    //             url:'/center/design/pageList',
    //             params:{
    //             	page:val,
    //             	rows:5
    //             }
    //         }).then(res => {
    //             let pageList = res.data.pageList;
    //             this.tabNavs = pageList.list;
    //             this.total = pageList.total;
    //             this.spcDescription = 'page_name';
    //         }).catch(err => {
    //             (err);
    //         })
    // 	}else if(type == "productGroup"){
    //         this.$ajax({
    //             methods:'get',
    //             url:'/center/productGroup/productGroupList',
    //             params:{
    //             	page:val,
    //             	rows:5
    //             }
    //         }).then(res => {
    //             let productGroupList = res.data.productGroupList;
    //             this.tabNavs = productGroupList.list;
    //             this.total = productGroupList.total;
    //             this.spcDescription = 'group_name';
    //         }).catch(err => {
    //             (err);
    //         })
    // 	}else if(type == "detail"){
    //         this.$ajax({
    //             methods:'get',
    //             url:'/center/product/productListForPage',
    //             params:{
    //             	page:val,
    //             	rows:5
    //             }
    //         }).then(res => {
    //             let productList = res.data.productList;
    //             this.tabNavs = productList.list;
    //             this.total = productList.total;
    //             this.spcDescription = 'product_name';
    //         }).catch(err => {
    //             (err);
    //         })
    // 	}
    // },
    // closeLinkWin(){
    //     this.isLink = false;
    //      if(this.linkType == 'new'){
    //         this.titleNav.navShow = '';
    // 	    this.titleNav.branchLine = '';
    //     }
    // },
    // searchGood(){

    // },
    // 计算显示内容
    // handleCurrentChange(val) {
    //     this.getUrlList(this.firstRoute, val);

    // },
    // closeLinkWin1(){
    //     this.isLink = false;
    //     // if(this.OuterLink == ''){
    //     //     this.OuterLink = '';
    //     // }

    //      if(this.linkType == 'new'){
    //         this.titleNav.navShow = '';
    // 	    this.titleNav.branchLine = '';
    //     }
    // },
    // 确定外链链接
    // checkLink(){
    //     let reg=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
    //     if(reg.test(this.OuterLink)){
    //         this.isLink = false;
    //         this.titleNav.navShow = '外链';
    //         this.titleNav.branchLine = this.OuterLink;
    //         this.titleNav.url = this.OuterLink;
    //         this.titleNav.isNavShow = false;
    //     }else{
    //         this.$message({
    // 	        showClose: true,
    // 	        message: '请填写正确链接地址',
    // 	        type: 'warning'
    //         });
    //     }
    // }

    // 改变是否是必填的标识
    changeIsMust(val) {
      val.length == 0 ? this.changeState() : this.noState();
    },
    getFileContent(file) {
      // console.log('getFileContent',file.target.files);
      // 新建一个FileReader
      let reader = new FileReader();
      // 读取文件(以纯文本的形式返回文件内容)
      reader.readAsText(file.target.files[0], "UTF-8");
      reader.onload = (e) => {
        // 文件内容字符串
        this.titleRightIcon = e.target.result;

        console.log("getFileContent", this.titleRightIcon);
      };
    },
  },
  computed: {
    ...mapState(["isMust"]),
  },
  watch: {
    title: "changeIsMust",
    titleRightText: function (curVal, oldVal) {
      this.titleRightTextOrIcon === "text" && this.changeIsMust(curVal);
    },
    // isLink:function(curVal,oldVal){
    //     if(!curVal){
    //         this.startSort();
    //     }else{
    //         this.stopSort();
    //     }
    // }
  },
  mounted() {
    this.initData();
    // this.getLink();
  },
};
</script>

<style scoped lang="scss">
.empty {
  border-color: #a94442;
  color: #a94442;
}
.contol_group span {
  // float: left;
  width: 110px;
  text-align: right;
  margin-right: 10px;
}

.setChoice {
  // float: left;
  width: 60%;

  :deep(.el-radio-group) {
    width: 80%;
    .el-radio-button {
      width: 50%;
      .el-radio-button__inner {
        width: 100%;
        padding: 6px 20px;
      }
    }
  }
  .editor-click-event {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    &.position {
      position: relative;
      // pointer-events: none;
    }
    .add,
    .desc {
      color: #409eff;
    }
    .add {
      font-size: 15px;
    }
    .file {
      // display: none;
      opacity: 0;
      position: absolute;
      top: 0;
      width: 40%;
      cursor: pointer;
    }
  }
  .mt-20 {
    margin-top: 20px;
  }
}
.hasNo {
  color: #f44;
}
/* 提示语 */
.reminder {
  color: #f44;
  margin-top: 5px;
  padding-left: 120px;
  font-size: 12px;
}
.reminder1 {
  padding-left: 5px;
}
.demonstration {
  margin-top: 2px;
}

.contol_group .el-dropdown span {
  text-align: left;
  color: #38f;
  margin-top: 2px;
  margin-left: 5px;
}
.contol_group .el-dropdown span.hasNo {
  color: #f44;
}
.set_title_bar {
  .contol_group {
    margin-top: 17px;
    display: flex;
    justify-content: start;
    align-items: center;
    &.align {
      align-items: stretch;
    }
    .demonstration {
      width: 90px;
      // margin-top: 7px;
    }
  }
  .arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
  }
}
</style>
